import { homeRoutes } from '@/routes/modules/menus';
import { useEffect, useState } from 'react';
import { useLocation } from 'react-router-dom';
import { AppHeader } from './AppHeader';
import { AppMain } from './AppMain';
import { ContainerLayout } from './AppStyle';

interface Props {
  style?: React.CSSProperties;
}

export const AppContainer: React.FC<Props> = (props) => {
  const { style } = props;

  const { pathname } = useLocation();
  const [isHome, setIsHome] = useState(false);

  useEffect(() => {
    if (homeRoutes?.length && pathname) {
      setIsHome(homeRoutes.map((item) => item.path).includes(pathname));
    }
  }, [pathname]);

  return (
    <ContainerLayout style={style}>
      <AppHeader isHome={isHome} />
      <AppMain isHome={isHome} />
    </ContainerLayout>
  );
};
